<template>
  <div id="exp-stock-top50">
    <div class="exp-stock-top50-title">近效期库存TOP50</div>
    <dv-scroll-board :config="config" style="width: 100%;height: 80%;" />
  </div>
</template>

<script>
import dates from '@/util/dates.js'

export default {
  name: 'ExpStockTop50',
  data() {
    return {
      config: {}
    }
  },
  methods: {
    dateDiff(date1, date2) {
      return Math.floor((date2 - date1) / 1000 / 60 / 60 / 24)
    },
    async createData() {
      let stockExp = []
      await this.$ajax.get('/wm/stock/get_stock_exp_date').then(resp => {
        if (resp.code != 0) {
          global.utilMessage.alertFail(`获取近效期TOP50数据发生错误：${resp.msg}`)
          return
        }
        if (resp.data.length > 0) {
          let now = new Date()
          resp.data.forEach((item, index) => {
            let stock = []
            stock.push(item.matrName)
            stock.push(item.skuQty)

            let dateDiff = this.dateDiff(now, new Date(item.expDate))
            if (dateDiff < 0) {
              dateDiff = '已过期'
            }
            stock.push(dateDiff)
            stockExp.push(stock)
          })
        }
      })
      this.config = {
        header: ['耗材', '数量', '有效天数'],
        data: stockExp,
        index: true,
        columnWidth: [50, 300, 100, 200],
        align: 'center',
        rowNum: 5,
        headerBGC: '#1981f6',
        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
        evenRowBGC: 'rgba(10, 29, 50, 0.8)'
      }
    }
  },
  mounted() {
    const { createData } = this

    createData()

    setInterval(createData, 1800000)
  }
}
</script>

<style lang="scss">
#exp-stock-top50 {
  position: relative;
  width: 100%;
  height: 38%;
  margin-bottom: 10px;
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  box-sizing: border-box;

  .exp-stock-top50-title {
    height: 20%;
    font-weight: bold;
    text-indent: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
  }
}
</style>
